<template>
  <div class="ai-analysis">
    <div class="step-one">
      <AIComponents />
    </div>
    <div class="step-two" v-if="false">
      <div class="all-title">学生智能体应用使用日志</div>
      <div class="all-box">
        <div class="two-search">
          <div>时间段：</div>
          <el-date-picker
            v-model="form.startTime"
            type="date"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="开始时间"
          />
          -
          <el-date-picker
            v-model="form.endTime"
            type="date"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="结束时间"
          />
          <el-input
            v-model="form.word"
            clearable
            style="width: 240px"
            placeholder="输入关键信息"
          />
          <div class="all-btn" @click="search">搜索</div>
        </div>
        <div>
          <el-table
            :data="tableData"
            v-loading="loading"
            element-loading-text="加载中..."
            style="width: 100%"
          >
            <el-table-column prop="created_at" label="时间" width="180" />
            <el-table-column
              prop="from_end_user_session_id"
              label="用户"
              width="180"
            />
            <el-table-column prop="name" label="标题" />
            <el-table-column prop="message_count" label="消息数" width="100" />
          </el-table>
          <div class="all-page">
            <el-pagination
              v-model:current-page="form.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 课前预习弹窗 -->
    <el-dialog
      v-model="isShowPre"
      width="25%"
      center
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="body-img"><img src="" alt="null" /></div>
        <div class="body-textone">
          鲁老师为你准备了<span style="font-weight: 700">课前预习</span>测验
        </div>
        <div class="body-texttwo">点击立即挑战！</div>
      </div>
      <template #footer>
        <el-button type="primary" color="#155eef" @click="goChallenge()"
          >立即挑战</el-button
        >
      </template>
    </el-dialog>

    <!-- 预习对话弹窗 -->
    <el-dialog
      v-model="isShowPreChat"
      width="55%"
      center
      :show-close="false"
      class="pre-chat-dialog"
      top="180px"
    >
      <template #header>
        <div class="dialog-header">
          <div class="header-title">课前预习</div>
          <div class="header-right">
            <div class="header-pic"><img src="" alt="null" /></div>
            <div class="close-icon" @click="isShowPreChat = false">
              <el-icon>
                <Close />
              </el-icon>
            </div>
          </div>
        </div>
      </template>

      <div class="dialog-chat-body">
        <commonChat_stuPre />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AIComponents from "@/components/AIComponents.vue";
import commonChat_stuPre from "@/components/commonChat_stuPre.vue";
export default {
  components: {
    AIComponents,
    commonChat_stuPre,
  },
  data() {
    return {
      courseId: "",
      classId: "",
      active: 0,
      isShowAI: false,
      loading: false,
      total: 1000,
      form: {
        startTime: "",
        endTime: "",
        word: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
      isShowPre: false, // 课前预习弹窗
      isShowPreChat: false, // 预习对话弹窗
    };
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
    this.classId = JSON.parse(localStorage.getItem("classId"));
    // this.getList();
  },
  methods: {
    search() {
      //如果结束日期小于起始日期，则提示错误，日期格式为YYYY-MM-DD，转换为时间戳
      if (new Date(this.form.startTime) > new Date(this.form.endTime)) {
        this.$message.error("结束日期不能小于起始日期");
        return;
      }
      this.form.page = 1;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      this.form.page = currentPage;
      this.getList();
    },

    getList() {
      // 处理null值，转换为空字符串
      const startTime = this.form.startTime || "";
      const endTime = this.form.endTime || "";
      const url = `/tes/dify/agent/list?startTime=${startTime}&endTime=${endTime}&courseId=${this.courseId}&classId=${this.classId}&page=${this.form.page}&limit=${this.form.limit}`;
      this.loading = true;
      this.$axios
        .get(url)
        .then((response) => {
          const res = response;
          this.tableData = res.data.content;
          this.total = res.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 立即挑战
    goChallenge() {
      this.isShowPre = false;
      this.isShowPreChat = true; // 显示预习对话弹窗
    },
  },
};
</script>

<style lang="scss" scoped>
.ai-analysis {
  background-color: #f3f5fa;
  padding: 40px 30px;
  box-sizing: border-box;
  min-height: 650px;
  .step-one {
    margin-bottom: 62px;
  }
  .step-two {
    .all-box {
      padding: 38px 52px;
    }
    .two-search {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 34px;
      :deep(.el-input__inner) {
        height: 38px;
      }
      .all-btn {
        height: 36px;
        line-height: 36px;
      }
    }
    .el-table {
      margin-bottom: 20px;
      :deep(th) {
        color: #7a8cb0;
      }
      .table-btns {
        display: flex;
        gap: 20px;
        > div {
          cursor: pointer;
          color: #457aff;
          &:hover {
            color: #2657b8;
          }
        }
      }
    }
  }
  .dialog-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    .body-img {
      width: 69px;
      height: 69px;
      border-radius: 50%;
    }
    .body-textone {
      margin-top: 28px;
      font-size: 18px;
      color: #34323d;
      margin-bottom: 10px;
    }
    .body-texttwo {
      font-size: 18px;
      color: #34323d;
    }
  }
}

// 预习对话弹窗样式
:deep(.pre-chat-dialog) {
  position: relative;
  background: linear-gradient(90deg, #cde9fd, #f0f2f8, #d1e1f8);
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 0;
    margin: 0;
  }

  .el-dialog__body {
    padding: 0;
    overflow: hidden;
  }
}

.dialog-header {
  position: absolute;
  width: 100%;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-title {
    font-weight: bold;
    font-size: 24px;
    color: #ffffff;
  }
  .header-right {
    display: flex;
    align-items: center;
    .close-icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background-color: #adadad;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-left: 15px;
    }
  }
}

.dialog-chat-body {
  height: 100%;
  background-color: #f3f5fa;
  overflow: hidden;
}
</style>
